<template>
    <div>
  
      <div class="block">
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        :change="queryMembertj()"
        value-format="yyyy-M-d"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <div id="main" ref="main" style="height: 80vh; width: 100%"></div>
  </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  export default {
    data(){
        return{
          value1:"",
          tableData: [],
          xAxiss:[],
        }
    },
    mounted(){
      
        this.getLoadEcharts();
    },
    created () {
      // this.queryMembertj();
    },
    methods:{
        queryMembertj(){
        
          this.axios.get("/api/hj/queryMembertj",{
            params:{
                sdate:this.value1[0],
                enddate:this.value1[1]
            }
          }).then(result=>{
            this.xAxiss=[];
             console.log(result.data)
             var booksum=[];
             var loginsum=[];
            for(var k in result.data){
              this.xAxiss.push(k)
              booksum.push(result.data[k].bookingSum)
              loginsum.push(result.data[k].loginSum)
              console.log(k)
            }
            console.log(booksum)
            console.log(loginsum)
              var myChart = echarts.init(this.$refs.main)
              myChart.setOption({
                 xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data:this.xAxiss
                    },
                series: [
                    {
                      name: '预约人数',
                      type: 'line',
                      stack: 'Total',
                      data: booksum
                    },
                     {
                      name: '登陆人数',
                      type: 'line',
                      stack: 'Total',
                      data: loginsum
                    }
                  ]
              })

          })
      },
        getLoadEcharts(){
             var myChart = echarts.init(this.$refs.main)
          var   option = {
    title: {
      text: '预约人数        登陆人数   '
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['预约人数', '登陆人数', ]
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data:this.xAxiss
    },
    yAxis: {
      type: 'value',
      data:[2,4,6,8,10,12]
    },
    series: [
      // {
      //   name: '干预方案总量',
      //   type: 'line',
      //   stack: 'Total',
      //   data: [120, 132, 101, 134, 90, 230, 210]
      // }
    ]
          }
        myChart.setOption(option);
        }
    }
  }
  
  </script>
  
  <style scoped>
  
  </style>